<template>
  <div class="aside">
    <el-row :gutter="0">
      <el-col>
        <img src="../assets/logo.png" alt="logo" style="width: 80%;" class="logo">
      </el-col>
      <el-col>
        <el-menu
            default-active="1-0"
            class="el-menu-vertical-demo"
            :default-openeds='["1"]'>
          <el-submenu index="1">
            <template #title>
              <i class="el-icon-s-home"></i>
              <span>文件类型</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-0" @click="toUrl('Index','all')"><i class="el-icon-files"></i>全部文件</el-menu-item>
              <el-menu-item index="1-1" @click="toUrl('Index','image')"><i class="el-icon-picture"></i>图片</el-menu-item>
              <el-menu-item index="1-2" @click="toUrl('Index','document')"><i class="el-icon-document"></i>文档
              </el-menu-item>
              <el-menu-item index="1-3" @click="toUrl('Index','video')"><i class="el-icon-video-camera-solid"></i>视频
              </el-menu-item>
              <el-menu-item index="1-4" @click="toUrl('Index','audio')"><i class="el-icon-video-camera"></i>音频
              </el-menu-item>
              <el-menu-item index="1-5" @click="toUrl('Index','other')"><i class="el-icon-more"></i>其他</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item index="2" @click="toUrl('Share','')">
            <i class="el-icon-share"></i>
            <span slot="title">我的分享</span>
          </el-menu-item>
          <el-menu-item index="3" @click="toUrl('Recycle','')">
            <i class="el-icon-delete-solid"></i>
            <span slot="title">回收站</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "Aside",
  methods: {
    toUrl(target, type) {
      if (type) {
        this.$router.push({name: target, params: {type: type}})
      } else {
        this.$router.push({name: target});
      }
    }
  }
}
</script>

<style scoped>
.aside > .logo {
  line-height: initial;
}

</style>
